import { createRouter, createWebHashHistory } from 'vue-router'
import Layout from '@/Layout'
import store from '@/store'
const Category = () => import('@/views/category/index') // 分类页面
const Search = () => import('@/views/search/index') // 搜索页面

const routes = [
  // 一级路由
  {
    path: '/',
    component: Layout,
    children: [
      // 二级路由
      {
        path: '',
        component: () => import('@/views/home')
      }
    ]
  },
  // 分类页面
  {
    path: '/category/:categoryid/:categoryname',
    component: Layout,
    children: [
      {
        path: '',
        component: Category
      }
    ]
  },
  // 搜索页面
  {
    path: '/search',
    component: Layout,
    children: [
      {
        path: '',
        component: Search
      }
    ]
  },
  // 商品详情页面
  {
    path: '/goods',
    component: Layout,
    children: [
      {
        path: '',
        component: () => import('@/views/goods')
      }
    ]
  },
  // 登录页面
  {
    path: '/login',
    component: () => import('@/views/login')
  },
  // 购物车页面
  {
    path: '/cart',
    component: Layout,
    children: [
      {
        path: '',
        component: () => import('@/views/cart')
      }
    ]
  },
  // 订单结算页
  {
    path: '/user/order',
    component: Layout,
    children: [
      {
        path: '',
        component: () => import('@/views/order')
      }
    ]
  },
  // 支付页面
  {
    path: '/user/pay',
    component: Layout,
    children: [
      {
        path: '',
        component: () => import('@/views/pay/index')
      }
    ]
  },
  // 支付结果页面
  {
    path: '/user/pay',
    component: Layout,
    children: [
      {
        path: '',
        component: () => import('@/views/pay/index')
      },
      {
        path: 'result',
        component: () => import('@/views/pay/result.vue')
      }
    ]
  }
]

const router = createRouter({
  history: createWebHashHistory(), // #/路径 哈希模式
  routes // 注册路由规则
})

// 目标: 未登录不想让他去/user开头路径
// 全局前置守卫
// 面试题: 什么是路由守卫?本质?
// 它就是路由在跳转流程代码中的一个函数, 前置守卫它是在路由跳转之前先经历一个函数的处理, 如果执行next()才会继续执行后续的路由相关代码
// 面试题: 路由是如何解析的, 过程是什么?
// https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%AE%8C%E6%95%B4%E7%9A%84%E5%AF%BC%E8%88%AA%E8%A7%A3%E6%9E%90%E6%B5%81%E7%A8%8B
// 经验:
// 如果需要限制的路由页面多的话, 给白名单(未登录只能去这几个页面)
// 如果需要限制的路由页面少的少, 给统一前缀方便判断(例如: 需要权限的页面路由路径都以/user开头)
router.beforeEach((to, from, next) => {
  const { profile } = store.state.user
  if (to.path.startsWith('/user') && !profile.token) {
    next({
      path: '/login'
    })
  } else {
    // 不去/user开头的页面, 登录不登录无所谓
    next()
  }
})

export default router
